"use client";

import { Mail, Github, BookOpen, Coffee } from "lucide-react";
import Link from "next/link";

export default function ContactPage() {
  return (
    <div className="container mx-auto py-16 px-4">
      {/* 页面标题 */}
      <div className="text-center mb-12">
        <h1 className="text-4xl font-bold mb-4">联系我们 ✨</h1>
        <p className="text-muted-foreground max-w-2xl mx-auto">
          心身同调·全维健康是一个开源项目，我们欢迎任何形式的交流、反馈和贡献。
        </p>
      </div>

      {/* 联系信息卡片网格 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
        {/* 邮箱 */}
        <div className="bg-card rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
          <div className="flex justify-center mb-4">
            <Mail className="w-10 h-10 text-primary" />
          </div>
          <h3 className="font-semibold mb-2">开发者邮箱</h3>
          <Link
            href="mailto:zeroicey.hp@outlook.com"
            className="text-muted-foreground hover:text-primary transition-colors"
          >
            zeroicey.hp@outlook.com
          </Link>
        </div>

        {/* GitHub */}
        <div className="bg-card rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
          <div className="flex justify-center mb-4">
            <Github className="w-10 h-10 text-primary" />
          </div>
          <h3 className="font-semibold mb-2">项目仓库</h3>
          <Link
            href="https://gitee.com/zeroicey/life-sync-health-web"
            target="_blank"
            className="text-muted-foreground hover:text-primary transition-colors"
          >
            在 Gitee 上查看 ⭐️
          </Link>
        </div>

        {/* 项目文档 */}
        <div className="bg-card rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
          <div className="flex justify-center mb-4">
            <BookOpen className="w-10 h-10 text-primary" />
          </div>
          <h3 className="font-semibold mb-2">项目文档</h3>
          <Link
            href="/docs"
            className="text-muted-foreground hover:text-primary transition-colors"
          >
            查看使用文档 📚
          </Link>
        </div>

        {/* 支持项目 */}
        <div className="bg-card rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
          <div className="flex justify-center mb-4">
            <Coffee className="w-10 h-10 text-primary" />
          </div>
          <h3 className="font-semibold mb-2">支持项目</h3>
          <Link
            href="/sponsor"
            className="text-muted-foreground hover:text-primary transition-colors"
          >
            请开发者喝咖啡 ☕️
          </Link>
        </div>
      </div>

      {/* 项目信息 */}
      <div className="bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg p-8 max-w-3xl mx-auto">
        <h2 className="text-2xl font-bold mb-6 text-center">参与贡献</h2>
        <div className="space-y-4">
          <p className="text-muted-foreground">
            我们欢迎社区的每一位成员参与项目建设，您可以通过以下方式参与：
          </p>
          <div className="space-y-2">
            <h3 className="font-semibold">贡献方式：</h3>
            <ul className="list-disc list-inside space-y-1 text-muted-foreground">
              <li>提交 Issue 报告问题或提出建议</li>
              <li>提交 Pull Request 贡献代码</li>
              <li>完善项目文档</li>
              <li>分享使用经验</li>
              <li>帮助推广项目</li>
            </ul>
          </div>
          <div className="pt-4">
            <Link 
              href="https://gitee.com/zeroicey/life-sync-health-web/issues"
              target="_blank"
              className="inline-flex items-center gap-2 text-primary hover:text-primary/80 transition-colors"
            >
              <Github className="w-4 h-4" />
              <span>提交 Issue</span>
            </Link>
          </div>
        </div>
      </div>

      {/* 底部声明 */}
      <div className="text-center mt-16 text-sm text-muted-foreground">
        <p>© 2024 心身同调·全维健康. All rights reserved.</p>
        <p className="mt-2">
          本项目遵循
          <Link 
            href="/license" 
            className="text-primary hover:underline mx-1"
          >
            MIT 开源协议
          </Link>
        </p>
      </div>
    </div>
  );
}
